<template>
  <h1>桃李不言下自成蹊</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/home">Go to Home</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/about">Go to About</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/order/3">Go to Order</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/product/3">Go to Product</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/lhzA/lhzB">Go to lhzAB</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/lhzA/lhzC">Go to lhzAC</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link :to="{ name: 'testDid', params: { id: '3' }}">Go to testD</router-link>
  </p>
  <p>
    <button type="button" @click="toTestA">testA</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" @click="toTestB">testB</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" @click="toTestC">testC</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" @click="back">返回</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" @click="toTestD">testD</button>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <!--<router-view></router-view>-->
  <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
  <router-view class="view main-content"></router-view>
  <router-view class="view right-sidebar" name="RightSidebar"></router-view>
</template>

<script>
// 方法一 引入路由表
// import router from "../../router/chap13/index.js";

import {useRouter} from "vue-router";

export default {
  name: "HelloLhz",
  setup() {
    // 方法二 注意：useRouter执行一定要放在setup方法内的顶部或者其他位置，不能放在下面setup的函数里面执行，否则作用域改变useRouter执行是undefined
    // 初始化路由
    const router = useRouter();
    const toTestA = function () {
      router.push({
        path: '/testA'
      });
    };
    const toTestB = function () {
      router.push({
        path: '/testB/3'
      });
    };
    const toTestC = function () {
      router.push({
        path: '/testC',
        query: {
          id: '3'
        },
      });
    };
    const toTestD = function () {
      router.push({
        name: 'testDid',
        params: {
          id: '3'
        },
      });
    };
    const back = function () {
      router.back();
    }
    return {
      toTestA, toTestB, toTestC, back, toTestD
    }
  }
}
</script>

<style scoped>

</style>